<template>
  <div class="box">
    <!-- 学科 -->
    <div style="margin-bottom: 10px">
      <span>关键字</span>
      <el-input v-model="name" class="inp" placeholder="请输入内容" clearable />
      <span>状态</span>
      <el-select v-model="input" placeholder="请选择活动区域" class="inp">
        <el-option label="启用" value="1" />
        <el-option label="禁用" value="0" />
      </el-select>
      <el-button @click="qingchu">清除</el-button><el-button type="primary" @click="sousuo">搜索</el-button>

      <el-button
        type="success"
        icon="el-icon-edit"
        class="adds"
        @click="tinajia"
      >
        新增技巧
      </el-button>
    </div>
    <!-- 提示 -->
    <el-alert type="info" show-icon>
      <template #title> 数据一共 {{ numberOfArticles }} </template>
    </el-alert>
    <!-- 表格 -->
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column label="文章标题" width="180">
        <template v-slot="{ row }">
          {{ row.title }}
          <i
            v-show="row.videoURL !== ''"
            style="color: #1890ff"
            class="el-icon-film"
            @click="videos(row)"
          />
        </template>
      </el-table-column>
      <el-table-column property="visits" label="阅读人数" width="120" />
      <el-table-column property="username" label="录入人" width="120" />
      <el-table-column property="createTime" label="录入时间" width="120">
        <template v-slot="{ row }">
          {{ row.createTime | times }}
        </template>
      </el-table-column>
      <el-table-column property="state" label="状态" width="120">
        <template v-slot="{ row }">
          {{ row.state === 1 ? '已启用' : '已禁用' }}
        </template>
      </el-table-column>
      <el-table-column property="address" label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="yulans(row)">预览</el-button>
          <el-button v-if="row.state === 1" type="text" @click="jinyong(row)">
            禁用
          </el-button>
          <el-button v-else type="text" @click="qiyong(row)"> 启用 </el-button>
          <span v-if="row.state === 1">
            <button ref="xiugai" type="text" class="anniu" @click="revise(row)">
              修改
            </button>
            <button ref="dell" type="text" class="anniu" @click="dell(row)">
              删除
            </button>
          </span>
          <span v-else>
            <button style="color: #999" type="text" class="anniu">修改</button>
            <button style="color: #999" type="text" class="anniu">删除</button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="float: right"
      background
      :current-page="page"
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="pagesize"
      layout="  prev, pager, next,sizes, jumper"
      :total="numberOfArticles"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹窗添加修改 -->
    <el-dialog :visible.sync="dialogVisible" width="40%">
      <template #title>
        <span v-if="show">新增文章</span>
        <span v-else>修改文章</span>
      </template>

      <span><i style="color: red; margin: 8px">*</i>文章标题</span>
      <el-input
        v-model="mingcheng"
        style="width: 70%; margin-left: 10px"
        placeholder="请输入学科名称"
      />
      <br>
      <span style="vertical-align: top">
        <i style="color: red; margin: 8px">*</i>文章内容
      </span>
      <quill-editor
        v-model="content"
        :options="editorOption"
        style="width: 72%; height: 100px; display: inline-block"
      />
      <br>
      <span><i style="color: red; margin: 8px">*</i>视频地址</span>
      <el-input
        v-model="shipindizhi"
        style="width: 70%; margin-left: 10px"
        placeholder="请输入地址"
      />

      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="addtianjai"> 确 定 </el-button>
      </span>
    </el-dialog>
    <!-- 删除弹框 -->
    <el-dialog title="提示" :visible.sync="delenr" width="30%">
      <span>
        <i class="el-icon-info" style="color: #e6a23c; font-size: 20px" />
        此操作将永久删除该文件，是否继续
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delenr = false">取 消</el-button>
        <el-button type="primary" @click="dels"> 确 定 </el-button>
      </span>
    </el-dialog>
    <!-- 预览弹窗 -->
    <el-dialog title="预览文章" :visible.sync="yulan" width="40%">
      <h3>{{ essay.biaoti }}</h3>
      <span style="margin: 10px">{{ essay.item }}</span>
      <span style="margin: 10px">{{ essay.name }}</span>
      <span style="margin: 10px">{{ essay.shuliang }}</span>
      <div class="yulan" v-html="essay.neirong" />
    </el-dialog>
    <!-- 视频播放 -->
    <el-dialog
      :visible.sync="shipinbofang"
      width="50%"
      :before-close="handleClose"
    >
      <video
        :src="shipindizhi"
        autoplay="autoplay"
        loop="loop"
        muted="muted"
        style="width: 100%; height: 500px; object-fit: fill"
      />
    </el-dialog>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import {
  wenzhanglist,
  wenzhangzhuangtai,
  wenzhangadd,
  wenzhangxiugai,
  wenzhangdel
} from '@/api/subject'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      shipinbofang: false, // 视频播放
      shipindizhi: '', // 视频地址
      // 富文本
      content: '',
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      },
      essay: {
        biaoti: '',
        item: '',
        name: '',
        shuliang: '',
        neirong: ''
      }, // 文章预览
      name: '', // 搜索内容
      mingcheng: '', // 目录名称
      arr: [],
      yulan: false, // 返回按钮
      id: this.$route.query.id, // 接口请求id
      delId: '', // 删除携带的id
      delenr: false, // 删除弹框
      // region: '', // 选择学科
      // bufen: true, // 禁用启用按钮
      // value: true, // 是否显示弹框里的
      show: true, // 判断是否是新增
      dialogVisible: false, // 弹框显示或隐藏
      pagesize: 10, // 每页几条
      page: 1, // 当前页
      input: '', // 输入框
      numberOfArticles: 100, // 数据总条数
      // 渲染的数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  },
  created() {
    this.renderThePage()
    // console.log(this.$route.query.id)
    console.log(this.input)
  },
  mounted() {},
  methods: {
    handleClose(done) {
      // 在这里处理关闭事件的逻辑
      this.shipindizhi = ''
      done()
    },
    // 取消
    quxiao() {
      this.dialogVisible = false
      this.mingcheng = ''
      this.content = ''
      this.shipindizhi = ''
    },
    // 清除
    qingchu() {
      this.name = ''
      this.renderThePage()
    },
    // 搜索
    async sousuo() {
      if (this.name !== '' && this.input !== '') {
        const { data } = await wenzhanglist({
          page: this.page,
          pagesize: this.pagesize,
          keyword: this.name,
          state: Number(this.input)
        })
        this.numberOfArticles = data.counts
        this.tableData = data.items
      }
    },
    // 视频
    videos(row) {
      console.log(row)
      this.shipindizhi = row.videoURL
      this.shipinbofang = true
    },
    // 新增
    tinajia() {
      this.dialogVisible = true
      this.show = true
    },
    // 预览
    yulans(row) {
      // console.log(row)
      this.yulan = true
      this.essay.biaoti = row.title
      this.essay.item = row.createTime
      this.essay.name = row.username
      this.essay.shuliang = row.visits
      this.essay.neirong = row.articleBody
    },
    // 添加
    async addtianjai() {
      if (this.show) {
        await wenzhangadd({
          title: this.mingcheng,
          articleBody: this.content,
          videoURL: this.shipindizhi
        })
      } else {
        await wenzhangxiugai({
          id: this.delId,
          title: this.mingcheng,
          articleBody: this.content,
          videoURL: this.shipindizhi
        })
      }
      this.dialogVisible = false
      this.renderThePage()
      this.mingcheng = ''
      this.content = ''
      this.shipindizhi = ''
    },
    // 启用按钮
    async jinyong(row) {
      await wenzhangzhuangtai({
        id: row.id,
        state: 0
      })
      this.renderThePage()
    },
    // 禁用按钮
    async qiyong(row) {
      await wenzhangzhuangtai({
        id: row.id,
        state: 1
      })
      this.renderThePage()
    },
    // 渲染页面
    async renderThePage() {
      const { data } = await wenzhanglist({
        page: this.page,
        pagesize: this.pagesize
      })
      this.numberOfArticles = data.counts
      this.tableData = data.items
      console.log(data)
    },
    // 点击修改
    async revise(row) {
      console.log(row)
      this.show = false
      this.dialogVisible = true
      this.mingcheng = row.title
      this.content = row.articleBody
      this.shipindizhi = row.videoURL
      this.delId = row.id
    },
    // 点击删除
    dell(row) {
      console.log(row)
      this.delenr = true
      this.delId = row.id
    },
    // 确认删除
    async dels() {
      await wenzhangdel(this.delId)
      this.delenr = false
      this.renderThePage()
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page = val
      this.renderThePage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.renderThePage()
    }
  }
}
</script>
<style scoped lang="scss">
.yulan {
  background-color: #f5f5f5;
  padding: 20px 5px;
  border-top: 1px #000 dashed;
}
.anniu {
  border: 0;
  background-color: transparent;
  font-size: 15px;
  color: #409eff;
}
.adds {
  float: right;
}
.box {
  padding: 20px;
  /* background-color: #f4f4f5; */
}
.inp {
  width: 200px;
  margin: 0 10px;
}
.el-dialog {
  background-color: transparent;
}
</style>
